<template>
  <ECharts :option="option" />
</template>

<script setup lang="ts">
import { ref, watchEffect, onMounted, onUnmounted } from "vue";
import { ECOption } from "@/components/ECharts/config";
import ECharts from "@/components/ECharts/index.vue";

const props = defineProps({
  dataGroups: {
    type: Array as () => any[],
    default: () => []
  },
  showTime: {
    type: String,
    default: ""
  }
});

const option = ref<ECOption | any>({
  title: {
    text: "",
    top: "10%",
    left: "center",
    textStyle: {
      color: "#fff",
      fontSize: 25
    }
  },
  //dataZoom-inside 内置型数据区域缩放组件 所谓内置 1平移：在坐标系中滑动拖拽进行数据区域平移。2缩放：PC端：鼠标在坐标系范围内滚轮滚动（MAC触控板类同;移动端：在移动端触屏上，支持两指滑动缩放。
  dataZoom: [
    {
      type: "inside", //1平移 缩放
      throttle: "50", //设置触发视图刷新的频率。单位为毫秒（ms）。
      minValueSpan: 4, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
      start: 0, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
      end: 100, //数据窗口范围的结束百分比。范围是：0 ~ 100。
      zoomLock: true //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
    }
  ],
  // 主要用来控制图表四周留白
  grid: {
    left: "4%",
    top: "35%",
    right: "4%",
    bottom: "10%",
    containLabel: true
  },
  // 提示框组件
  tooltip: {
    trigger: "axis", //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
    backgroundColor: "#fff", //提示框浮层的背景颜色。
    axisPointer: {
      //去掉移动的指示线
      type: "none"
    },
    // 自定义提示框内容
    formatter: function (params) {
      let text = params[0].name + ": " + params[0].value + "%";
      return text;
    }
  },
  //直角坐标系 grid 中的 x 轴，
  xAxis: {
    type: "category", //'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
    // 坐标轴轴线相关设置
    axisLine: {
      lineStyle: {
        color: "#E5E5E5" // 坐标轴线线的颜色。
      }
    },
    // 坐标轴刻度标签(类目,简单说就是x轴上的内容)的相关设置
    axisLabel: {
      //  是否显示坐标刻度标签(这了指是否显示x轴上的月份)
      show: true,
      // 标签文字的颜色
      color: "#fff",
      fontSize: 20
    },
    //x轴刻度线设置
    axisTick: {
      show: false
    },
    // 类目数据，在类目轴（type: 'category'）中有效。
    data: []
  },
  //直角坐标系 grid 中的 y 轴，
  yAxis: {
    type: "value", //'value' 数值轴，适用于连续数据。
    // 坐标轴轴线相关设置
    show: false,
    axisLine: {
      show: false //y轴线消失
    },
    // 坐标轴刻度标签(类目,简单说就是x轴上的内容)的相关设置
    axisLabel: {
      show: false,
      // 标签文字的颜色
      color: "#fff",
      formatter: function (value) {
        return value + "%";
      }
    },
    //y轴刻度线设置
    axisTick: {
      show: false
    },
    splitNumber: 3 //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整.在类目轴中无效。
  },
  series: [
    {
      type: "line", //折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。和全局设置type效果一样,表示折线图
      // 系列中的数据内容数组。数组项通常为具体的数据项。
      data: [],
      // 折线条的样式
      lineStyle: {
        width: 8,
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          type: "linear",
          colorStops: [
            {
              offset: 0,
              color: "#b1c4e9"
            },
            {
              offset: 1,
              color: "#568af4"
            }
          ]
        },
        shadowColor: "rgba(72,216,191, 0.2)",
        shadowBlur: 10,
        shadowOffsetY: 20
      },
      itemStyle: {
        color: "#fff",
        borderWidth: 10,
        borderColor: "#A9F387"
      },
      label: {
        show: true, // 显示标签
        formatter: params => {
          // 使用箭头函数来自定义标签格式
          // 可以在这里进行复杂的格式化逻辑，例如添加单位或格式化日期
          return params.value + "%";
        },
        position: "top", // 标签位置
        color: "#fff",
        fontSize: 20
      },
      smooth: true,
      symbol: "circle", //拐点样式
      symbolSize: 3 //拐点大小
    }
  ]
});

let timer: any;
const currentGroupIndex = ref(0);

onMounted(() => {
  updateChartData(); // 初始化图表数据
  timer = setInterval(() => {
    currentGroupIndex.value = (currentGroupIndex.value + 1) % props.dataGroups.length;
    updateChartData();
    updateDataZoom();
  }, 5000); // 每5秒切换一次
});

onUnmounted(() => {
  clearInterval(timer);
});

const updateChartData = () => {
  const currentGroup = props.dataGroups[currentGroupIndex.value];
  if (currentGroup) {
    option.value.title.text = currentGroup.title;
    option.value.xAxis.data = currentGroup.xdata;
    option.value.series[0].data = currentGroup.ydata;
  }
};

const updateDataZoom = () => {
  const currentGroup = props.dataGroups[currentGroupIndex.value];
  if (props.showTime && currentGroup && currentGroup.xdata.length > 0) {
    const index = currentGroup.xdata.indexOf(props.showTime);
    if (index !== -1) {
      const totalCount = currentGroup.xdata.length;
      const zoomSize = 5; // 显示的数据点数量

      // 计算开始和结束的索引
      let startIndex = Math.max(0, index - Math.floor(zoomSize / 2));
      let endIndex = Math.min(totalCount - 1, startIndex + zoomSize - 1);

      // 如果结束索引到达了数组末尾，调整开始索引
      if (endIndex === totalCount - 1) {
        startIndex = Math.max(0, endIndex - zoomSize + 1);
      }

      // 将索引转换为百分比
      const start = (startIndex / totalCount) * 100;
      const end = ((endIndex + 1) / totalCount) * 100;

      option.value.dataZoom[0].start = start;
      option.value.dataZoom[0].end = end;
    }
  }
};

watchEffect(() => {
  updateChartData();
  updateDataZoom();
});
</script>
